<template>
  <view class="container">
    <top-back-navbar position="fixed" title="签到" background="#ffffff" color="#000000"></top-back-navbar>
    <view class="header u-f-ajc u-f-column">
      <view class="lists u-f-ac u-f-jsa">
        <view class="items u-f-ajc" v-for="(item, index) in 7" :key="index" :class="current == index ? 'active' : ''">
          <view v-if="current == index">
            <u-icon name="checkbox-mark"></u-icon>
          </view>
          <view v-else>+{{index + 1}}</view>
        </view>
      </view>
      <view style="width: 100%;">
        <u-steps :list="numList" :current="current" active-color="#d52d22"></u-steps>
      </view>
	  <view style="padding: 30rpx;width:100%;">
	  	<button type="primary" style="background-color: #d52d22;color:#fff; width:100%;border-radius: 60rpx;" :custom-style="customStyle" @click="signin">立即打卡</button>
	  </view>
    </view>
  </view>
</template>

<script>
  import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
  export default {
    components: {
      yuDatetimePicker
    },
    data() {
      return {
        current: 0,
        customStyle: {
          backgroundColor: '#30549C',
          height: '90rpx',
        },
        numList: [{
          name: '今天'
        }, {
          name: '09.28'
        }, {
          name: '09.29'
        }, {
          name: '09.30'
        }, {
          name: '10.01'
        }, {
          name: '10.02'
        }, {
          name: '10.03'
        }],

        res: [],
        openid: '',
        sign: '点击签到',
        disabled: 'disabled',
        signed: '',
        data: [],
        my_year: '',
        my_month: '',
        showorhide: 'none',
        // arrs:['2020年01月','2020年02月','2020年03月','2020年04月','2020年05月','2020年06月','2020年07月','2020年08月','2020年09月','2020年10月','2020年11月','2020年12月','2021年01月','2021年02月','2021年03月','2021年04月','2021年05月','2021年06月','2021年07月'],
      };
    },
    onLoad: function() {
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../login/login'
          });
        }
      });
    },
    methods: {
      setAjax() {
        uni.hideLoading()
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            uni.hideLoading()
            this.res = res.data
            this.signed = res.data.signed
            this.my_year = res.data.my_year
            this.my_month = res.data.my_month
            // 日期接口
            uni.request({
              url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign.getCalendar&app=1&date=' +
                res.data.my_year + '-' + res.data.my_month,
              method: 'POST',
              data: {
                'openid': this.openid
              },
              header: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              success: res => {
                this.data = res.data.calendar
                console.log(this.data)
                uni.hideLoading()
              },
              fail: () => {},
              complete: () => {}
            });
          },
          fail: () => {},
          complete: () => {}
        });
      },
      select() {
        this.showorhide = 'block'
      },
      // bank_miss(index) {
      // 	this.my_year = this.arrs[index].substring(0,4)
      // 	this.my_month = this.arrs[index].substring(5,7)
      // 	this.showorhide = 'none'
      // // 日期接口
      // uni.request({
      // 	url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign.getCalendar&app=1&date='+this.my_year+'-'+this.my_month,
      // 	method: 'POST',
      // 	data: {'openid':this.openid},
      // 	header:{'Content-Type':'application/x-www-form-urlencoded'},
      // 	success: res => {
      // 		this.data = res.data.calendar
      // 		console.log(this.data)
      // 		uni.hideLoading()
      // 	},
      // 	fail: () => {},
      // 	complete: () => {}
      // });
      // },
      jump(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.src
        });
      },
      signin() {
        this.signed = 1
        this.sign = '今日已签'
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign.dosign&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            uni.showModal({
              content: res.data.result.message,
              confirmText: "确定",
              cancelText: "取消",
              success: res => {},
            })
            this.setAjax()
            uni.hideLoading()
            console.log(res)
          },
          fail: () => {},
          complete: () => {}
        });
      },
      toggleTab(item, index) {
        this.$refs.dateTime.show();
      },
      onConfirm(val) {
        this.my_year = val.selectArr[0]
        this.my_month = val.selectArr[1]
        // 日期接口
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign.getCalendar&app=1&date=' +
            this.my_year + '-' + this.my_month,
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            this.data = res.data.calendar
            console.log(this.data)
            uni.hideLoading()
          },
          fail: () => {},
          complete: () => {}
        });
      }
    }
  }
</script>

<style lang="scss">
  page {
  		background: #f3f6fb;
  		height: 100%;
  	}
  	.container {
  		height: 100%;
		padding:90rpx 30rpx 30rpx 30rpx;
  	}

  .header {
    width: 100%;
    border-radius: 20rpx;
    box-sizing: border-box;
    height: 400upx;
    background-color: #fff;
	box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
    .lists {
      width: 100%;
      margin-bottom: 20rpx;

      .items {
        border-radius: 100%;
        width: 66rpx;
        height: 66rpx;
        background-color: #F0EFF5;
        color: #888888;
      }

      .active {
        background-color: #d52d22;
        color: #fff;
      }
    }
  }

  .one {
    flex: 1;
  }

  .one_one {
    margin-top: 150upx;
    color: #FFFFFF;
  }

  .two {
    flex: 1.5;
  }

  .avatar image {
    margin-top: 50upx;
    border-radius: 100upx;
    background-color: #fff;
  }

  .white {
    color: #fff;
  }

  .yellow {
    color: yellow;
  }

  .details {
    position: absolute;
    top: 20upx;
    right: 10upx;
    color: #ccc;
  }

  .status {
    font-size: 32upx;
    padding: 5upx 8upx;
    width: 150upx;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 50upx;
  }

  .day {
    height: 100upx;
    color: #888;
  }

  .week {
    position: relative;
    background-color: #FFFFFF;
  }

  .scroll {
    position: absolute;
    z-index: 99;
    top: 60upx;
    left: 60upx;
    background-color: #eee;
    border: 2upx;
  }
</style>
